<template>
	<div class="container">
		<h1>预报名</h1>
		<el-form label-width="120px" label-position="top" class="form">
			<el-form-item label="身份证号: ">
				<el-col :span="16">
					<el-input
						type="text"
						id="sfz"
						placeholder="请输入身份证号"
						v-model.trim="formData.sfz"
					></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="手机号: ">
				<el-col :span="16">
					<el-input
						type="text"
						id="phone"
						placeholder="请输入手机号"
						v-model.trim="formData.phone"
					></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="学院: ">
				<el-col :span="16">
					<el-input
						type="text"
						id="xy"
						placeholder="请输入学院"
						v-model.trim="formData.xy"
					></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="年级: ">
				<el-select v-model="formData.grade" placeholder="Select" size="large">
					<el-option label="大一" value="大一" />
					<el-option label="大二" value="大二" />
					<el-option label="大三" value="大三" />
					<el-option label="大四" value="大四" />
					<el-option label="研究生" value="研究生" />
				</el-select>
			</el-form-item>
			<el-form-item label="第几次考试: ">
				<el-select v-model="formData.cs" placeholder="Select" size="large">
					<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="是否自费: ">
				<div>
					{{ parseInt(this.$store.getters.user.isFree) ? "自费" : "免费" }}
				</div>
				<!-- <el-select v-model="formData.isMf" placeholder="Select" size="large">
					<el-option label="是" value="1" />
					<el-option label="否" value="0" />
				</el-select> -->
			</el-form-item>
			<el-form-item label="是否保研: ">
				<el-select v-model="formData.isBy" placeholder="Select" size="large">
					<el-option label="是" value="1" />
					<el-option label="否" value="0" />
				</el-select>
			</el-form-item>
			<el-button @click="Dialog = true" type="primary">申请</el-button>

			<el-dialog v-model="Dialog" title="请确认信息" width="50%" center>
				<span>
					<el-descriptions title="个人信息">
						<el-descriptions-item label="姓名：">{{
							user.studentName
						}}</el-descriptions-item>
						<el-descriptions-item label="学号：">{{
							user.studentID
						}}</el-descriptions-item>
						<el-descriptions-item label="身份证号：">{{
							formData.sfz
						}}</el-descriptions-item>
						<el-descriptions-item label="电话号码：">{{
							formData.phone
						}}</el-descriptions-item>
						<el-descriptions-item label="院系：">{{
							formData.xy
						}}</el-descriptions-item>
						<el-descriptions-item label="年级：">{{
							formData.grade
						}}</el-descriptions-item>
						<el-descriptions-item label="第几次考试：">{{
							formData.cs
						}}</el-descriptions-item>
						<el-descriptions-item label="是否免费：">{{
							parseInt(formData.isMf) === 1 ? "是" : "否"
						}}</el-descriptions-item>
						<el-descriptions-item label="是否有保研机会：">{{
							parseInt(formData.isBy) === 1 ? "是" : "否"
						}}</el-descriptions-item>
					</el-descriptions>
				</span>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="Dialog = false">取消</el-button>
						<el-button type="primary" @click="signup"> 确认 </el-button>
					</span>
				</template>
			</el-dialog>
		</el-form>
	</div>
</template>

<style scoped>
.dialog-footer button:first-child {
	margin-right: 10px;
}
</style>

<script>
import { ElMessage } from "element-plus";
export default {
	name: "MainPage",
	data() {
		return {
			user: null,
			formData: {
				sfz: "",
				phone: "",
				xy: "",
				isMf: this.$store.getters.user.isFree,
				isBy: "0",
				cs: 1,
				grade: "",
			},
			options: [
				{
					label: "第一次",
					value: 1,
				},
				{
					label: "第二次",
					value: 2,
				},
				{
					label: "第三次",
					value: 3,
				},
				{
					label: "三次以上",
					value: 999,
				},
			],
			Dialog: false,
		};
	},
	methods: {
		signup() {
			if (
				this.formData.sfz === "" ||
				this.formData.phone === "" ||
				this.formData.xy === "" ||
				this.formData.grade === ""
			) {
				ElMessage({
					message: "请将信息填写完整",
					type: "warning",
				});
				this.Dialog = false;
				return;
			}
			let requestBody = new URLSearchParams();
			requestBody.append("studentId", this.user.studentID);
			requestBody.append("name", this.user.studentName);
			requestBody.append("isFree", parseInt(this.formData.isMf));
			requestBody.append("grade", this.formData.grade);
			requestBody.append("department", this.formData.xy);
			requestBody.append("isPos", parseInt(this.formData.isBy));
			requestBody.append("id", this.formData.sfz);
			requestBody.append("times", this.formData.cs);
			fetch(`${this.$store.getters.point}/Student/preSignUp/insertPreSignUp`, {
				method: "POST",
				mode: "cors",
				body: requestBody,
			})
				.then((response) => response.text())
				.then((result) => {
					let data = parseInt(JSON.parse(result).code);
					if (data == 1) {
						ElMessage({
							message: "报名成功",
							type: "success",
						});
						this.$router.push("/");
					} else {
						ElMessage({
							message: "报名失败",
							type: "error",
						});
					}
				});
			this.Dialog = false;
		},
	},
	mounted() {
		this.user = this.$store.getters.user;
	},
};
</script>

<style scoped>
.container {
	font-weight: bolder;
	width: 50%;
	margin: auto;
}

.form {
	margin-top: 30px;
}
</style>
